<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #list li {
            font-size: 25px;
            width: 400px;
            line-height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>JQ 事件</h1>
    <button id="btn">解绑</button>
    <button id="btn1">添加一行li</button>
    <hr>

    <ul id="list">
        <li>《悯农》 ---- 假李绅(唐)</li>
        <li>锄禾日当午</li>
        <li>汗滴和下土</li>
        <li>谁知盘中餐</li>
        <li>莉莉真辛苦</li>
    </ul>

    <hr>
    <a href="http://acfun.cn" id="ac">ACFUN</a>
    <!-- 死链 -->
    <a href="javascript:void(0)">我是个无效链接</a>

    <hr>
    <div id="out" style="width:300px;height:300px;background-color: #f90">
        <div id="in" style="width:150px;height:150px;background-color: #09f"></div>
    </div>

    <script>
        // 简写方式
        $('#list li').click(function(){
            console.log($(this).html());
        });

        // 标准绑定方式   bind()
        $('#list li').bind('click', function(){
            alert($(this).html());
        });

        // 多个事件的绑定
        $('#list li').bind({
            'mouseover': function(){
                $(this).css('background-color', '#ccc');
            },
            'mouseout': function(){
                $(this).css('background-color', '');
            }
        });

        // 仅仅绑定 一次性 事件  one()
        $('h1').one('click', function(){
            alert('你是个好人,再见.');
        });
        
        // 解绑
        $('#btn').click(function(){
            // 解绑li的所有事件
            // $('#list li').unbind();
            // 解绑某个事件
            $('#list li').unbind('mouseout');
        });

        // 添加一行li
        $('#btn1').click(function (){
            $('<li>啊, 这是一首好湿! </li>').appendTo('#list');
        });


        // 事件委派 live()
        // $('#list li').live({
        //     'mouseover': function(){
        //         $(this).css('background-color', '#f00');
        //     },
        //     'mouseout': function(){
        //         $(this).css('background-color', '');
        //     }
        // });

        // on()
        $(document).on('mouseover', '#list li', function (){
            $(this).css('background-color', '#f90');
        }).on('mouseout', '#list li', function (){
            $(this).css('background-color', '');
        });

        // 自动触发事件
        // $('h1').trigger('click');
        $('#btn1').trigger('click');

        // 阻止默认事件
        $('#ac').click(function(){
            // alert('12345678');
            return false;
        });

        // 两个div绑定相同的事件
        $('#out').click(function(){
            console.log('我是out');
        });
        $('#in').click(function(){
            console.log('我是in');
            return false; // 阻止事件冒泡
        });

    </script>
</body>
</html>